<template>
  <div>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="客户名称">
        <el-input v-model="searchForm.customerName"></el-input>
      </el-form-item>
      <el-form-item label="客户订单号">
        <el-input v-model="searchForm.customerOrder"></el-input>
      </el-form-item>
       <el-form-item label="合同备注">
        <el-input v-model="searchForm.materialCode"></el-input>
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input v-model="searchForm.productName"></el-input>
      </el-form-item>
      <el-form-item label="产品型号">
        <el-input v-model="searchForm.productModel"></el-input>
      </el-form-item>
      <el-form-item label="物料代码">
        <el-input v-model="searchForm.materialCode"></el-input>
      </el-form-item>
      <el-form-item label="下单日期">
        <el-date-picker v-model="searchForm.beginOrderDate" type="date" placeholder="开始日期"></el-date-picker>
        <el-date-picker v-model="searchForm.endOrderDate" type="date" placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="合同交期">
        <el-date-picker v-model="searchForm.beginDeliveryDate" type="date" placeholder="开始日期"></el-date-picker>
        <el-date-picker v-model="searchForm.endDeliveryDate" type="date" placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="变更后交期">
        <el-date-picker v-model="searchForm.beginChangeDate" type="date" placeholder="开始日期"></el-date-picker>
        <el-date-picker v-model="searchForm.endChangeDate" type="date" placeholder="结束日期"></el-date-picker>
      </el-form-item>
    </el-form>
    <div class="btmOption">
      <div>
        <el-button type="primary" @click="handleAdd">
          <i class="el-icon-plus"></i> &nbsp; 新增</el-button>
        <el-button type="text" @click="handleImport">
          <i class="el-icon-upload2"></i> &nbsp; 导入</el-button>
        <el-button type="text" @click="handleExport">
          <i class="el-icon-download"></i> &nbsp; 导出</el-button>
      </div>
      <div>
        <el-button type="primary" @click="handleSearch" :loading="loadingSearch"><i class="el-icon-search"></i> &nbsp;
          搜索</el-button>
        <el-button @click="handleReset"><i class="el-icon-refresh" :loading="loadingSearch"></i> &nbsp;
          重置</el-button>
      </div>
    </div>
    <el-table :data="tableData" :loading="loadingTable" style="width: 100%;" max-height="660px">
      <el-table-column type="index" :index="1" label="序号"></el-table-column>
      <el-table-column prop="department" label="部门"></el-table-column>
      <el-table-column prop="salesman" label="业务员"></el-table-column>
      <el-table-column prop="customerName" label="客户名称"></el-table-column>
      <el-table-column prop="customerOrder" label="客户订单号" width="100"></el-table-column>
      <el-table-column prop="category" label="类别"></el-table-column>
      <el-table-column prop="materialCode" label="物料代码"></el-table-column>
      <el-table-column prop="productName" label="产品名称"></el-table-column>
      <el-table-column prop="productModel" label="产品型号"></el-table-column>
      <el-table-column prop="contractRemarks" label="合同备注"></el-table-column>
      <el-table-column prop="unit" label="单位"></el-table-column>
      <el-table-column prop="orderQuantity" label="订单数量"></el-table-column>
      <el-table-column prop="orderDate" label="下单日期" width="100"></el-table-column>
      <el-table-column prop="deliveryDate" label="合同交期" width="100"></el-table-column>
      <el-table-column prop="changeDate" label="变更后交期" width="100"></el-table-column>
      <el-table-column prop="responsibleEngineer" label="责任工程师" width="100"></el-table-column>
      <el-table-column prop="productionStatus" label="在制状态"></el-table-column>
      <el-table-column prop="storageTime" label="入库时间" width="100"></el-table-column>
      <el-table-column prop="shippingDate" label="出货日期" width="100"></el-table-column>
      <el-table-column prop="outsourced" label="是否外协"></el-table-column>
      <el-table-column prop="productionQuantity" label="投产数量"></el-table-column>
      <el-table-column prop="quantityShipped" label="已发货数量" width="100"></el-table-column>
      <el-table-column prop="remarks" label="备注" width="250" style=""></el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <div style="display: flex; justify-content: space-around">
            <el-button type="text" @click="handleEdit(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
            <div>
              <el-popover :value="deleteVisible">
                <p>是否确定删除此条数据？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="handleDelete([scope.row.id])">确定</el-button>
                </div>
                <el-button slot="reference" type="text" style="color: red" @click="deleteVisible = true"><i
                    class="el-icon-delete"></i>删除
                </el-button>
              </el-popover>
            </div>
            <el-button type="text" @click="handleView(scope.row)"><i class="el-icon-view"></i>查看</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pageNum" :page-sizes="[10, 20]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    <FormComponent ref="formComponent" @refresh="handleSearch" />
    <DetailComponent ref="detailComponent" />
    <ImportComponent ref="importComponent" @refresh="handleSearch" />
  </div>
</template>

<script>
import {
  getList,
  deleteBydSpecialPojectDataById,
} from "@/views/subdev/special/helper/api";
import dayjs from "dayjs";
import FormComponent from "@/views/subdev/special/form.vue";
import ImportComponent from "@/views/subdev/special/import.vue";
import DetailComponent from '@/views/subdev/special/detail.vue'

export default {
  components: {
    FormComponent,
    DetailComponent,
    ImportComponent,
  },
  data() {
    return {
      searchForm: {
        customerName: "",
        customerOrder: "",
        productName: "",
        productModel: "",
        materialCode: "",
        beginOrderDate: "",
        endOrderDate: "",
        beginDeliveryDate: "",
        endDeliveryDate: "",
        beginChangeDate: "",
        endChangeDate: "",
      },
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loadingSearch: false,
      loadingTable: false,
      loadingEdit: false,
      loadingDelete: false,
      loadingView: false,
      deleteVisible: false
    };
  },
  mounted() {
    this.handleSearch()
  },
  beforeDestroy() {
  },
  methods: {
    handleSearch() {
      this.loadingSearch = true;
      this.loadingTable = true;
      getList(this.searchForm, this.pageNum, this.pageSize)
        .then((res) => {
          res.rows.forEach((element) => {
            element.orderDate = element.orderDate ? dayjs(element.orderDate).format(
              "YYYY-MM-DD"
            ) : '暂无';
            element.deliveryDate = element.deliveryDate ? dayjs(element.deliveryDate).format(
              "YYYY-MM-DD"
            ) : '暂无';
            element.changeDate = element.changeDate ? dayjs(element.changeDate).format(
              "YYYY-MM-DD"
            ) : '暂无';
            element.shippingDate = element.shippingDate ? dayjs(element.shippingDate).format(
              "YYYY-MM-DD"
            ) : '暂无';
            element.storageTime = element.storageTime ? dayjs(element.storageTime).format(
              "YYYY-MM-DD"
            ) : '暂无';
          });
          this.total = res.total;
          this.tableData = res.rows;

          setTimeout(() => {
            this.loadingSearch = false;
            this.loadingTable = false;
          });

        })
        .catch((error) => {
          console.error("搜索失败:", error);
          setTimeout(() => {
            this.loadingSearch = false;
            this.loadingTable = false;
          });
        });
    },
    handleReset() {
      this.searchForm = {
        customerName: "",
        customerOrder: "",
        productName: "",
        productModel: "",
        materialCode: "",
        beginOrderDate: "",
        endOrderDate: "",
        beginDeliveryDate: "",
        endDeliveryDate: "",
        beginChangeDate: "",
        endChangeDate: "",
      };
      this.handleSearch();
    },
    handleAdd() {
      this.$refs.formComponent.showDialog();
    },
    handleImport() {
      this.$refs.importComponent.showDialog();
    },
    handleExport() {
      this.$confirm('是否根据搜索条件导出所有内容?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.download(`/bydspecialPoject/downExcel`,
          {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            ...this.searchForm
          },
          `订单数据_${new Date().getTime()}.xlsx`,)
      })
    },
    handleView(row) {
      this.loadingView = true;
      // 查看逻辑
      this.$refs.detailComponent.showDialog(row);
      this.loadingView = false;
    },
    handleDelete(ids) {
      this.loadingDelete = true;
      // 删除逻辑
      deleteBydSpecialPojectDataById(ids)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("删除成功！");
          } else {
            this.$message.success("删除失败！");
            console.error(res.msg);
          }
          this.deleteVisible = false;
          this.handleSearch();
        })
        .catch((err) => {
          console.error(err);
        });
      this.loadingDelete = false;
    },
    handleEdit(row) {
      this.loadingEdit = true;
      this.$refs.formComponent.showDialog(row);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleSearch();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.handleSearch();
    },
  },
};
</script>

<style lang="scss" scoped>
/* 样式 */
::v-deep .el-form-item {
  margin-bottom: 5px !important;
}

::v-deep .el-form {
  padding: 10px;
}

.btmOption {
  padding: 5px 15px;
  display: flex;
  justify-content: space-between;
}

::v-deep .el-table__body-wrapper {
  min-height: 550px;
}


.pagination {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: #fff;
}
</style>
